<template>
	<view>
		<!-- 顶部组件 -->
		<u-navbar :background="navBar.top_bgc" :border-bottom="navBar.border" :back-icon-color="navBar.iconColor" id="nav-bar" :title="navBar.title" title-color="#fff"></u-navbar>
		<!-- 顶部虚化背景 -->
		<view class="top-bg">
			<image :src="crowdcard.img_horizon" mode="aspectFill"></image>
			<view class="mask"></view>
		</view>
		<!-- 顶部标题 -->
		<view class="page-title u-flex-col">
			<image src="https://img.youpin.mi-img.com/static/weex_images/v1/logo_crowdfunding.png"></image>
			<view class="sub">永远年轻，永远好奇</view>
		</view>
		<!-- 顶部商品 -->
		<view class="top-goods-card" v-if="crowdcard.name" @click="goToDetail(crowdcard.gid)">
			<image class="horizon" :src="crowdcard.img_horizon" mode="aspectFill"></image>
			<view class="content u-flex">
				<image class="goods-img" :src="crowdcard.img800s"></image>
				<view class="detail u-flex-col">
					<view class="title u-line-1">{{ crowdcard.name }}</view>
					<view class="progress u-flex">
						<view><mi-line-progress :percent="crowdcard.progress"></mi-line-progress></view>
						<text>{{ crowdcard.progress }}%</text>
					</view>
					<view class="support">
						<text>{{ crowdcard.saled }}人支持</text>
						<text class="gap">|</text>
						<text>剩余{{ crowdcard.cf_end | surplusDay }}天</text>
					</view>
					<view class="price u-flex">
						<text>￥</text>
						<text class="price-min">{{ crowdcard.price_min / 100 }}</text>
						<text class="spec" v-if="crowdcard.price_tag">起</text>
						<text class="market-price" v-if="item.price_min != crowdcard.market_price">￥{{ crowdcard.market_price / 100 }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 正在众筹 -->
		<view class="crowding" v-if="crowdlist.result.goods_list.length != 0">
			<view class="module-title">
				<view >{{ crowdlist.title }}</view>
				<view class="sub">{{ goodsNum(crowdlist.subtitle) }}</view>
			</view>
			<view class="goods-box">
				<view class="content u-flex" v-for="(item, index) in crowdlist.result.goods_list" :key="index" @click="goToDetail(item.gid)">
					<u-lazy-load
						class="goods-img"
						:border-radius="12"
						:image="item.img_square || item.img800s"
						loading-img="/static/lazy/goods-lazy-load.png"
					></u-lazy-load>
					<view class="detail u-flex-col">
						<view class="title u-line-1">{{ item.name }}</view>
						<view class="progress u-flex">
							<view><mi-line-progress :percent="item.progress"></mi-line-progress></view>
							<text>{{ item.progress }}%</text>
						</view>
						<view class="support">
							<text>{{ item.saled | saledNum }}人支持</text>
							<text class="gap">|</text>
							<text>剩余{{ item.cf_end | surplusDay }}天</text>
						</view>
						<view class="price u-flex">
							<text>￥</text>
							<text class="price-min">{{ item.price_min / 100 }}</text>
							<text class="spec" v-if="item.price_tag">起</text>
							<text class="market-price" v-if="item.price_min != item.market_price">￥{{ item.market_price / 100 }}</text>
							<view class="go-to-detail">立即支持</view>
						</view>
					</view>
					<view class="label">
						<text>{{ item.price_tag ? '热门' : '人气' }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 众筹广场 -->
		<view class="plaza" v-if="crowdlist.result.goods_list.length != 0">
			<view class="module-title">
				众筹广场
			</view>
			<image src="https://img.youpin.mi-img.com/jianyu/a20dc0b7f6c523e6673a7792979ff551.png" lazy-load></image>
		</view>
		<!-- 回归精选 -->
		<view class="flyback" v-if="flyBackList.length != 0">
			<view class="module-title">
				<view>众筹回归精选</view>
				<view class="sub">重磅归来 不容错过</view>
			</view>
			<view class="card" v-for="(item,index) in flyBackList" :key="index">
				<view class="head u-flex" :style="{backgroundImage:`url(${item.config.bg_config.pic_url})`}">
					<view class="more u-flex">
						<text>更多</text>
						<u-icon custom-prefix="custom-icon" name="right" color="#fff" size="26"></u-icon>
					</view>
				</view>
				<view class="goods-box u-flex">
					<view class="item" v-for="(gitem,gindex) in item.result.goods_list" :key="gindex" @click="goToDetail(gitem.gid)">
						<u-lazy-load
							class="goods-img"
							:border-radius="12"
							:image="gitem.img800s || gitem.img_square"
							loading-img="/static/lazy/goods-lazy-load.png"
						></u-lazy-load>
						<view class="title u-line-1">{{gitem.attr_ext.custom_name}}</view>
						<view class="price u-flex">
							<text>￥</text>
							<text class="price-min">{{ gitem.price_min / 100 }}</text>
							<text class="spec" v-if="gitem.price_tag">起</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<full-loading :show="fullLoading"></full-loading>
	</view>
</template>

<script>
import fullLoading from '@/components/full-loading.vue'
import miLineProgress from '@/components/mi-line-progress.vue'
export default {
	data() {
		return {
			navBar: {
				top_bgc: {
					background: 'transparent'
				},
				border: false,
				title: '',
				height: 0,
				iconColor: '#fff'
			},
			crowdcard: {},
			crowdlist: {
				result: {
					goods_list: []
				}
			},
			flyBackList:[],
			fullLoading: true
		}
	},
	onLoad() {
		this.getData()
		this.getViewHeight()
	},
	methods: {
		getData() {
			this.$u.api.crowdfunding().then(res => {
				// console.log(res)
				res.floors.forEach(x => {
					if (x.module_key == 'crowdfunding_36') {
						// 只取6件商品
						x.data.result.goods_list = x.data.result.goods_list.splice(0,6)
						this.flyBackList.push(x.data)
					}
				})
				this.disposeData(res.floors)
				this.fullLoading = false
			})
			.catch(err => {
				console.log(err)
				this.$refs.miToast.show({
					title: '数据获取失败，请返回重新进入',
					type: 'error',
					back: true
				})
			})
		},
		disposeData(item) {
			item.forEach((x, i) => {
				switch (x.module_key) {
					case 'crowdcard':
						this.crowdcard = item[i].data.result.goods_list[0]
						break
					case 'crowdlist':
						this.crowdlist = item[i].data
						break
				}
			})
		},
		getViewHeight() {
			uni.createSelectorQuery()
				.in(this)
				.select('#nav-bar')
				.boundingClientRect(data => {
					this.navBar.height = data.height
				})
				.exec()
		},
		goodsNum(str) {
			if (str) return str.replace('{{}}', this.crowdlist.result.goods_list.length)
		},
		goToDetail(gid) {
			uni.navigateTo({
				url: '../../shop/goods/detail/detail?gid=' + gid
			})
		}
	},
	onPageScroll(e) {
		if (e.scrollTop > this.navBar.height) {
			this.navBar.top_bgc.background = '#494949'
			this.navBar.title = '有品众筹'
		} else {
			this.navBar.top_bgc.background = 'transparent'
			this.navBar.title = ''
		}
	},
	filters: {
		surplusDay(endTime) {
			// 计算剩余天数
			return Math.floor((endTime - Date.now() / 1000) / (24 * 60 * 60))
		},
		saledNum(num) {
			if (num < 10000) {
				return num
			} else {
				// 向下取整并取一位小数
				return Math.floor(num / 1000) / 10 + '万'
			}
		}
	},
	components: {
		miLineProgress,
		fullLoading
	}
}
</script>

<style lang="scss">
page {
	background-color: #f4f4f4;
}
.top-bg {
	position: absolute;
	top: 0;
	width: 750rpx;
	height: 720rpx;
	object-fit: cover;
	overflow: hidden;
	border-bottom-right-radius: 480rpx;
	// background: url('https://vkceyugu.cdn.bspapp.com/VKCEYUGU-weitao/32500f00-abd6-11ea-b244-a9f5e5565f30.png') no-repeat center / 100% 100%;
	z-index: -1;
	image {
		width: 100%;
		height: 100%;
		filter: blur(10rpx);
		transform: scale(1.2);
	}
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba($color: #000000, $alpha: 0.7);
		z-index: 0;
	}
}
.page-title {
	margin-top: 40rpx;
	padding: 0 24rpx;
	align-items: center;
	image {
		width: 280rpx;
		height: 50rpx;
	}
	.sub {
		margin-top: 12rpx;
		color: rgba($color: #fff, $alpha: 0.4);
		font-size: 26rpx;
	}
}
.top-goods-card {
	margin: 50rpx auto 0;
	// padding: 0 24rpx;
	width: 702rpx;
	border-radius: 20rpx;
	background-color: #fff;
	box-shadow: 1rpx 2rpx 6rpx rgba($color: #eee, $alpha: 0.2);
	overflow: hidden;
	.horizon {
		width: 100%;
		height: 360rpx;
		border-radius: 20rpx 20rpx 0 0;
	}
}
.content {
	padding: 30rpx 20rpx 20rpx;
	.goods-img {
		height: 160rpx;
		width: 160rpx;
		min-width: 160rpx;
	}
}
.detail {
	flex: 1;
	padding-left: 40rpx;
	height: 180rpx;
	.title {
		max-width: 440rpx;
		font-size: 32rpx;
		color: #333;
	}
	.progress {
		margin-top: 10rpx;
		view {
			width: 292rpx;
		}
		text {
			margin-left: 10rpx;
			color: #999;
			font-size: 26rpx;
		}
	}
	.support {
		color: #999;
		font-size: 26rpx;
		margin-top: 10rpx;
		.gap {
			margin: 0 10rpx;
		}
	}
}
.price {
	margin-top: auto;
	color: rgb(227, 13, 13);
	font-size: 26rpx;
	height: 40rpx;
	font-family: 'AllAndNone';
	.price-min {
		font-size: 34rpx;
		margin-right: 4rpx;
		font-weight: bold;
	}
	.market-price {
		margin-left: 6rpx;
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
	}
	.spec {
		font-size: 24rpx;
	}
	.go-to-detail {
		margin-left: auto;
		color: #fff;
		border-radius: 8rpx;
		padding-left: 16rpx;
		padding-right: 16rpx;
		height: 46rpx;
		line-height: 46rpx;
		background: linear-gradient(to right, rgb(240, 206, 123), rgb(221, 177, 81));
	}
}
.module-title {
	margin: 30rpx 0 20rpx;
	padding: 0 24rpx;
	font-size: 32rpx;
	color: #333;
	.sub {
		font-size: 26rpx;
		color: #999;
		margin-top: 8rpx;
	}
}
.crowding {
	.goods-box {
		background-color: #fff;
		.content {
			position: relative;
			border-bottom: 1rpx solid #f2f2f2;
			.goods-img {
				height: 230rpx;
				width: 230rpx;
				min-width: 230rpx;
				border-radius: 12rpx;
			}
			.detail {
				height: 230rpx;
			}
			.go-to-detail {
				border-radius: 2rpx;
				background: #f3a74d;
			}
			.label {
				position: absolute;
				top: 50rpx;
				left: 16rpx;
				width: 78rpx;
				height: 40rpx;
				line-height: 40rpx;
				color: #fff;
				font-size: 26rpx;
				text-align: center;
				background: url('')
					no-repeat center / 100% 100%;
			}
		}
	}
}

.plaza {
	image {
		margin: 20rpx 0;
		width: 750rpx;
		height: 285rpx;
	}
}
.flyback {
	padding: 0 24rpx;
	.module-title {
		padding: 0;
	}
	.card {
		border-radius: 16rpx;
		overflow: hidden;
		background-color: #fff;
		margin-bottom: 30rpx;
		.head {
			padding: 0 20rpx;
			height: 90rpx;
			width: 100%;
			background-size: 100% 100%;
			.more {
				font-size: 24rpx;
				color: #fff;
				margin-left: auto;
				line-height: 28rpx;
			}
		}
		.goods-box {
			flex-wrap: wrap;
			justify-content: space-between;
			padding:  20rpx 20rpx 28rpx;
			.item {
				width: 218rpx;
				.goods-img {
					width: 218rpx;
					height: 218rpx;
				}
				.title {
					text-align: center;
					font-size: 26rpx;
					padding: 0 10rpx;
				}
				.price {
					font-size: 24rpx;
					margin-top: 10rpx;
					justify-content: center;
					.price-min {
						font-size:28rpx
					}
				}
			}
			
		}
	}
}
</style>
